<template>
    <!-- torefs将某个响应式对象的全部属性提供给外部使用 -->
    <h1>机构:{{ xd }} </h1>
    <h1>网站:{{ website }}</h1>
    <h1>
        前端课程：
        <ul>
            <li>
                {{course.a}}
            </li>
            <li>
                {{course.b}}
            </li>
            <li>
                {{course.c}}
            </li>
        </ul>
    </h1>
</template>
<script>
import { reactive, toRefs } from 'vue'

export default {
    name:"helloWorld",
    setup() {
        let data = reactive({
            xd:'小滴课堂',
            website:'chrome',
            course:{
                a:'vue',
                b:'react',
                c:'node'
            }
        })
        return{
            ...toRefs(data)
        }
    },

}
</script>
